'use client'
import Image from 'next/image'
import { ReactLenis } from 'lenis/react'
import { useState } from 'react'
import { twMerge } from 'tailwind-merge'
import { Consultant, TabLeft, TabRight } from './_components'
import 'swiper/css'
import 'swiper/css/pagination'
import 'swiper/css/navigation'
import { consultant, fullTimeTeachers, topTeachers } from './datas'

export default function PruductAndService() {
  const [activeIndex, setActiveIndex] = useState(0)
  const [active, setActive] = useState(0)

  return (
    <ReactLenis root>
      <main className='bg-[url(/images/product/banner-bg.png)] bg-contain bg-left-top bg-no-repeat'>
        <section className='pt-[60px] md:pt-[125px] mb-[10px] md:mb-[66px]'>
          <div className='w-[1650px] max-1650:w-auto px-[10px] lg:px-[20px] mx-auto mb-[30px] md:mb-[52px]'>
            <h1 className='text-white text-[26px] md:text-[48px] leading-[26px] md:leading-[48px] mb-[10px] md:mb-[30px] font-bold text-center'>产品与服务</h1>
            <Image alt='product-banner-title' src='/images/product/title-pic.png' width={758} height={77} className='mx-auto' />
          </div>
          <div className='w-[calc(100vw-20px)] md:w-[716px] mx-auto p-[3px] md:p-[7px] bg-white rounded-full mb-[10px] md:mb-[50px]'>
            <ul className='flex items-center justify-between text-center text-sm md:text-[30px] md:leading-[30px] text-[#333] space-x-[10px] md:space-x-[20px]'>
              <li className={twMerge('flex-1 p-[5px] md:p-[10px] select-none cursor-pointer rounded-full transition-colors duration-300', activeIndex === 0 && 'bg-[#0C4E99] text-white')} onMouseEnter={() => setActiveIndex(0)}>背景履历提升</li>
              <li className={twMerge('flex-1 p-[5px] md:p-[10px] select-none cursor-pointer rounded-full transition-colors duration-300', activeIndex === 1 && 'bg-[#0C4E99] text-white')} onMouseEnter={() => setActiveIndex(1)}>升学之路指导</li>
            </ul>
          </div>
          {activeIndex === 0 && <TabLeft />}
          {activeIndex === 1 && <TabRight />}
        </section>
        <section className='bg-gradient-to-b from-[#5a89d2] from-10% to-[#F3F5F8] to-50%'>
          <div className='w-[1340px] max-1650:w-auto px-[10px] lg:px-[20px] mx-auto pt-[20px] md:pt-[82px] pb-[30px] md:pb-[70px]'>
            <h1 className='text-white text-[26px] md:text-[48px] leading-[26px] md:leading-[48px] mb-[10px] md:mb-[30px] font-bold text-center'>师资与团队</h1>
            <div className='relative w-[280px] md:w-[534px] h-[40px] md:h-[77px] mx-auto mb-[20px] md:mb-[66px]'>
              <Image alt='Faculty_team' src='/images/product/Faculty_team.png' fill className='object-contain' draggable={false} />
            </div>
            <ul className='flex items-center justify-center gap-[30px] md:gap-[150px] text-white text-center mb-[38px]'>
              <li>
                <p className='text-[20px] md:text-[40px] lg:text-[60px] leading-[20px] md:leading-[40px] lg:leading-[60px] font-bold mb-[5px] md:mb-[10px] lg:mb-[20px]'>10</p>
                <p className='text-xs md:text-[18px] lg:text-[24px] md:leading-[18px] lg:leading-[24px]'>10大Ip顶配名师团队</p>
              </li>
              <li>
                <p className='text-[20px] md:text-[40px] lg:text-[60px] leading-[20px] md:leading-[40px] lg:leading-[60px] font-bold mb-[5px] md:mb-[10px] lg:mb-[20px]'>2500+</p>
                <p className='text-xs md:text-[18px] lg:text-[24px] md:leading-[18px] lg:leading-[24px]'>top级咨询师体量</p>
              </li>
              <li>
                <p className='text-[20px] md:text-[40px] lg:text-[60px] leading-[20px] md:leading-[40px] lg:leading-[60px] font-bold mb-[5px] md:mb-[10px] lg:mb-[20px]'>81.6%</p>
                <p className='text-xs md:text-[18px] lg:text-[24px] md:leading-[18px] lg:leading-[24px]'>届TOP10咨询师含量更是高达</p>
              </li>
            </ul>
            <ul className='grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-[5px] md:gap-[30px] lg:gap-[20px] xl:gap-[50px] pb-[20px] md:pb-[80px]'>
              {topTeachers.map((item, index) => (
                <li className='group shadow-[0px_20px_18px_0_rgba(30,102,182,0.07)] h-[338px] rounded-b-[10px] overflow-hidden lg:hover:scale-[1.01] lg:hover:translate-y-[-10px] cursor-pointer transition-transform duration-300 relative' key={index}>
                  <div className='h-[134px] rounded-t-[16px] bg-[rgba(230,233,238,0.85)] translate-y-[43px]'>
                    <div className='w-[184px] h-[188px] mx-auto relative top-[-43px]'>
                      <Image alt='' src={item.avatar} fill />
                    </div>
                  </div>
                  <div className='bg-white absolute left-0 right-0 top-[162px] group-hover:top-[16px] duration-500 ease-out transition-all bottom-0 px-[30px] text-black'>
                    <div className='absolute top-[-16px] left-0 h-[17px] rounded-t-[16px] w-full bg-white'></div>
                    <p className='text-center text-[24px] text-[#184579] leading-[24px] mt-[20px] font-bold mb-[17px]'>{item.name}</p>
                    <p className='text-[#184579] text-xs px-[10px] py-[1px] border border-[#184579] mb-[30px] rounded-lg text-center'>{item.title}</p>
                    <p className='text-xs'>{item.text}</p>
                  </div>
                </li>
              ))}
            </ul>
            <h1 className='flex items-center justify-center text-[#333] text-[16px] md:text-[36px] md:leading-[36px] font-bold space-x-[5px] md:space-x-[10px] mb-0 md:mb-[50px]'>
              <div className='relative w-[22px] md:w-[44px] h-[14px] md:h-[27px] rotate-180'><Image alt='icon' fill src='/images/page-title-icon.png' /></div>
              <div>全职资深顾问团队</div>
              <div className='relative w-[22px] md:w-[44px] h-[14px] md:h-[27px]'><Image alt='icon' fill src='/images/page-title-icon.png' /></div>
            </h1>
            <div className='py-0 md:py-[20px] mb-[20px] md:mb-[74px] grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-[5px] md:gap-[30px] lg:gap-[20px] xl:gap-[28px]'>
              {fullTimeTeachers.map((item, index) => (
                <div className='group shadow-[0px_20px_18px_0_rgba(30,102,182,0.07)] h-[338px] rounded-b-[10px] overflow-hidden lg:hover:scale-[1.01] lg:hover:translate-y-[-10px] cursor-pointer transition-transform duration-300 relative' key={index}>
                  <div className='h-[134px] rounded-t-[16px] bg-[rgba(230,233,238,0.85)] translate-y-[43px]'>
                    <div className='w-[184px] h-[188px] mx-auto relative top-[-43px]'>
                      <Image alt='' src={`/images/product/teacher-avatar1.png`} fill />
                    </div>
                  </div>
                  <div className='bg-white absolute left-0 right-0 top-[162px] group-hover:top-[16px] duration-500 ease-out transition-all bottom-0 px-[30px] text-black'>
                    <div className='absolute top-[-16px] left-0 h-[17px] rounded-t-[16px] w-full bg-white'></div>
                    <p className='text-center text-[24px] text-[#184579] leading-[24px] mt-[20px] font-bold mb-[17px]'>{item.name}</p>
                    <p className='text-[#184579] text-xs px-[10px] py-[1px] border border-[#184579] mb-[30px] rounded-lg text-center'>{item.title}</p>
                    <p className='text-xs mb-[5px]'>{item.text1}</p>
                    <p className='text-xs'>{item.text2}</p>
                  </div>
                </div>
              ))}
            </div>
            <h1 className='flex items-center justify-center text-[#333] text-[16px] md:text-[36px] md:leading-[36px] font-bold space-x-[5px] md:space-x-[10px] mb-[10px] md:mb-[50px]'>
              <div className='relative w-[22px] md:w-[44px] h-[14px] md:h-[27px] rotate-180'><Image alt='icon' fill src='/images/page-title-icon.png' /></div>
              <div>咨询师</div>
              <div className='relative w-[22px] md:w-[44px] h-[14px] md:h-[27px]'><Image alt='icon' fill src='/images/page-title-icon.png' /></div>
            </h1>
            <div className='block md:flex items-stretch'>
              <div className='overflow-x-auto'>
                <ul className='w-fit md:w-[200px] lg:w-[282px] bg-white flex md:block gap-[2px] md:gap-0 rounded-t-[5px] md:rounded-bl-[5px] lg:rounded-l-[20px] overflow-hidden md:border-r border-b md:border-b-0'>
                  {consultant.map((item, index) => (
                    <li key={index} className={twMerge('w-[100px] md:w-auto py-[14px] lg:py-[22px] pl-[20px] lg:pl-[48px] md:pr-0 text-[#333] text-sm lg:text-[20px] leading-[20px] select-none cursor-pointer transition-colors', active === index && 'bg-[#0E509B] text-white')} onClick={() => setActive(index)}>{item.title}</li>
                  ))}
                </ul>
              </div>
              <Consultant active={active} />
            </div>
          </div>
        </section>
      </main>
    </ReactLenis>
  )
}
